<template>
  <div class="home-category">
    <div class="cate"
         v-for="(fir, index) in cateList"
         :key="fir.id"
         @mouseenter="activeIndex = index">
      <router-link :to="`/category/${fir.id}`">{{ fir.name }}</router-link>
      <template v-if="fir.children"
                v-for="sec in fir.children.slice(0, 2)">
        <router-link to="">{{ sec.name }}</router-link>
      </template>
      <template v-else>
        <skeleton width="70px" height="18px"/>
        <skeleton width="70px" height="18px"/>
      </template>
    </div>
    <div class="cate" @mouseenter="activeIndex = -1">
      <a href="#">品牌</a>
      <a href="#">品牌推荐</a>
    </div>
    <!-- 类目详情 -->
    <div class="category-detail-box" v-show="activeGoods.length">
      <home-category-detail title="分类推荐">
        <component :is="activeIndex === -1 ? HomeCategoryBrand : HomeCategoryGood"
                   v-for="good in activeGoods" :key="good.id" :data="good">
        </component>
      </home-category-detail>
    </div>
  </div>
</template>

<script setup lang="ts">
import HomeCategoryDetail from '@/components/library/HomeCategoryDetail.vue'
import HomeCategoryGood from '@/components/library/HomeCategoryGood.vue'
import HomeCategoryBrand from '@/components/library/HomeCategoryBrand.vue'
import Skeleton from '@/components/library/Skeleton.vue'
import {useCategoryStore} from '@/stores/category'
import {storeToRefs} from 'pinia'
import {computed, ref} from 'vue'

let cateStore = useCategoryStore()
let {list: cateList, brand} = storeToRefs(cateStore)

let activeIndex = ref<number>(-1)
let activeGoods = computed(() => {
  if (activeIndex.value === -1)
    return brand.value
  let activeCate = cateList.value[activeIndex.value]
  return activeCate && activeCate.goods || []
})
</script>

<style scoped lang="less">
.home-category {
  width: 250px;
  height: 100%;
  position: relative;
  background-color: rgba(0, 0, 0, .8);

  .cate {
    padding-left: 40px;
    height: 50px;
    display: flex;
    align-items: center;

    &:hover {
      background-color: @xtxColor;

      & ~ .category-detail-box {
        display: block;
      }
    }

    *~* {
      margin-left: 6px;
    }

    a {
      color: white;

      &:nth-of-type(1) {
        font-size: 16px;
      }
    }
  }

  .category-detail-box {
    position: absolute;
    display: none;
    left: 100%;
    top: 0;

    &:hover {
      display: block;
    }
  }
}
</style>